import { ElMessage } from "element-plus";
import { jsonRequest } from "../../../requests"
export interface ContainerLayout {
    height: number;
    width: number;
    left: number;
    top: number;
}
export interface LayoutData {
    [key: string]: ContainerLayout;
}



export class DraggingLayoutManager {
    private needSave = false;
    private timerForSaving = -1; // 保存布局的定时器
    private topPointer = 0;
    private leftPointer = 0;
    private componentName: string
    public containerLayout: LayoutData = {};

    constructor(componentName: string, containerNames: string[], onLayoutLoad: (layout: LayoutData) => void) {
        this.componentName = componentName;
        this.timerForSaving = window.setInterval(async () => {
            if (this.needSave) {
                await this.saveLayout(this.containerLayout);
                this.needSave = false;
                ElMessage.success("Layout saved!");
            }
        }, 3000);
        this.getLayout(containerNames).then((res) => {
            this.containerLayout = res;
            console.log("this.containerLayout", this.containerLayout)
        }).finally(() => { onLayoutLoad(this.containerLayout) })
    }


    public updateContainerLayout(containerName: string, layout: ContainerLayout) {
        this.containerLayout[containerName] = layout;
        this.needSave = true;
    };

    private createDefaultLayouts(containerNames: string[]): { [key: string]: ContainerLayout } {
        const layouts: { [key: string]: ContainerLayout } = {}
        for (const container of containerNames) {
            layouts[container] = this.getContainerLayout(container)
        }
        return layouts
    }
    // public async getContainersLayout() {
    //     containerLayout = await getLayout();
    // };
    private newLayout(containerName: string): ContainerLayout {
        const layout = { left: 0, top: this.topPointer, width: 300, height: 200 };
        this.topPointer += 212;
        return layout;
    };

    public getContainerLayout(containerName: string): ContainerLayout {
        let layout = this.containerLayout[containerName];
        if (layout != null) {
            return layout;
        } else {
            layout = this.newLayout(containerName);
            this.containerLayout[containerName] = layout;
            return layout;
        }
    };

    public printCurrentLayout() {
        console.log("CURRENT_LAYOUT:", this.containerLayout)
    }

    private async saveLayout(layout: any): Promise<any> {
        const resp = await jsonRequest.post(`/api/${this.componentName}/save_layout`, { layout });
    };


    private async getLayout(containerNames: string[]): Promise<LayoutData> {
        try {
            const resp = await jsonRequest.get(`/api/${this.componentName}/load_layout`, {});
            return resp as LayoutData;
        } catch {
            ElMessage.error("Failed to load layout from config!");
            return this.createDefaultLayouts(containerNames)
        }
    };
}
// let needSave = false;
// let timer = window.setInterval(async () => {
//     if (needSave) {
//         await saveLayout(containerLayout);
//         needSave = false;
//         ElMessage.success("Layout saved!");
//     }
// }, 3000);
// let topPointer = 0;
// let leftPointer = 0;



// Arrange layout items in order.






